<template>
    <div>
        <h3 style="text-align: center;">用户信息列表</h3>
        <div style="height: 800px;">
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="name"
                        label="用户名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户登录名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        align="center">
                </el-table-column>
                 <el-table-column
                        prop="phoneNum"
                        label="电话"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="用户角色"
                        align="center"
                        >
                    <template scope="scope">
                        <span>{{scope.row.role==1?"管理员":"普通用户"}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template scope="scope">
                        <div v-if="scope.row.role!==1">
                        <el-button type="danger" @click="del(scope)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center;margin-top: 20px;">
            <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :page-size=10
                    @current-change="currentChange"
                    :current-page="currentPage"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "order",
        data() {
            return {
                list: [],
                total:100,
                limit:20,
                currentPage:1
            }
        },
        methods: {
            initData() {
                this.$http.get('user/list',{
                    params:{
                        limit:this.limit,
                        page:this.currentPage
                    }
                }).then(data=>{
                    if (data.data.code ===100000){
                        this.list = data.data.data.list
                        this.total = data.data.data.total
                    }
                })
            },
            currentChange(val){
                this.currentPage = val
                this.initData();
            },
            del(scope){
                this.$http.get("user/del",{
                    params:{
                        id:scope.row.id
                    }
                }).then(data=>{
                    if (data.data.code===100000){
                        this.$message.success("删除成功");
                        this.list.splice(scope.$index,1)
                    }else {
                        this.$message.error(data.data.msg)
                    }
                })
            }
        },
        created() {
            this.initData();
        }
    }
</script>

<style scoped>

</style>